<template>
<!-- 事件需要绑定在表单上，同时阻止表单默认提交行为 -->
<form class="form-inline" @submit.prevent="addtask">
  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">任务</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="请输入待办事项" v-model.trim="task">
  </div>

  <button type="submit" class="btn btn-primary mb-2" >新增任务</button>
</form>
</template>

<script>
export default {
  name:'TodoButton',
  emits:['setTask'],
  data(){
    return{
      // 新增任务
      task:''
    }
  },
  methods:{
    // 添加任务
    addtask(){
      if(this.task === '') return alert('请不要输入空任务')
      this.$emit('setTask',this.task)
      this.task= ''
    }
  }
}
</script>

<style lang='less' scoped>

</style>